<template>
	<view class="moneyBox">
		<view class="moneyBox">
			<view class="numBox">
				<view class="num" v-for="item in list" :key="item">
					{{item}}
				</view> 
			</view>
			<view class="line" id="lineId">
				<view class="btoo bottom" :style="[lineStyle]"></view>

				<view class="dian" v-for="(item,i) in list.length+1" :key="item" :style="{left:lineItemW*i+'px'}">
				</view>
				<view class="iocn" style="z-index: 11;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :style="[btnStyle]">
					<!-- <u-icon name="play-left-fill"></u-icon> --> 
					<div style="width: 15rpx;height: 35rpx;background: #0E59EA;border-radius: 20rpx;"></div>
					<div style="width: 26rpx;height: 26rpx;position: absolute;left: -2rpx;top: 50rpx;">
						<image style="width: 100%;height: 100%;" src="../static/anniui.png" mode=""></image>
					</div> 
				</view>
				<view class="iocn iconRight" style="z-index: 11;" @touchstart="touchstartR" @touchmove="touchmoveR" @touchend="touchend" :style="[btnStyleR]">
					<!-- <u-icon name="play-left-fill"></u-icon> -->
					<div style="width: 15rpx;height: 35rpx;background: #0E59EA;border-radius: 20rpx;z-index: 11;"></div>
					<div style="width: 26rpx;height: 26rpx;position: absolute;left: -2rpx;top: 50rpx;">
						<image style="width: 100%;height: 100%;" src="../static/anniui.png" mode=""></image>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			option:Array
		},
		data() {
			return {
				paX: 0,
				paRX: 0,
				list:this.option||[],
				lineW: null,
				lineWT: null,
				lineItemW: null,
				index: 0,
				indexR:0,
				offset: {},
				offsetR: {},
				threshold: 10,
				LeftX: 0,
				RightX: 0
			}
		},
		computed: {
			lineStyle() {
				let str = {
					// width: this.lineW-this.lineWT + 'px',
					width: this.lineW - this.lineWT - (this.lineW - this.paRX) + 'px',
					left: this.LeftX + 'px',
					right: this.RightX + 'px'
				}
				return str
			},

			btnStyle() {
				let str = {
					left: this.paX + 'px'
				}
				return str
			},
			btnStyleR() {
				let str = {
					left: this.paRX + 'px'
				}
				return str
			},
		},
		mounted() {
			this.getEl()
		},
		methods: {
			getEl() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#lineId').boundingClientRect(data => {
					this.lineW = data.width
					this.paRX = data.width
					this.lineItemW = this.lineW / this.list.length
				}).exec()
			},
			touchend(){
				let params=[this.index,this.indexR]
				this.$emit('change',params)
			},
			
			// 点击触发
			touchstart(e) {
				this.offset = e.changedTouches[0]
			},
			touchmove(e) {
				let mon = e.changedTouches[0]
				if (mon.pageX <= 0) mon.pageX = 0
				if (mon.pageX >= this.lineW) {
					mon.pageX = this.lineW
				}
				let range = mon.pageX - this.offset.pageX

				let num = 1
				if (range > 0) {
					num = Math.ceil(mon.pageX / this.lineItemW)

				} else {
					num = Math.floor(mon.pageX / this.lineItemW)
				}
				if(this.paRX-num * this.lineItemW>=this.lineItemW){
					this.paX = num * this.lineItemW
					this.lineWT = this.paX
					this.LeftX = this.paX
					this.RightX = null
					this.index=num
				}
				
				// let num = 1
				// if (range > 0) {
				// 	num = Math.ceil(mon.pageX / this.lineItemW)
				// } else {
				// 	num = Math.floor(mon.pageX / this.lineItemW)
				// }

				// if(num>0){
				// 	this.LeftX=num*this.lineItemW
				// 	console.log(this.LeftX);
				// 	if(this.lineW-this.LeftX<=this.lineItemW){
				// 		this.lineW=this.lineItemW
				// 	}else{
				// 		this.lineW=this.lineW-this.LeftX
				// 	}
				// 	this.paX = num * this.lineItemW
				// }

				// this.paX=this.LeftX
				// console.log(mon.pageX - this.lineItemW);
				// if (mon.pageX - this.lineItemW <= this.threshold) {
				// 	// this.index = num
				// 	// this.paX = num * this.lineItemW
				// 	// console.log(this.paX,this.lineW);
				// 	// this.lineW=this.lineW-this.paX
				// 	// this.LeftX=this.paX
				// }
				// console.log(mon.pageX - this.lineItemW <= this.threshold,num, this.index, this.lineItemW);
			},

			touchstartR(e) {
				this.offsetR = e.changedTouches[0]
			},
			touchmoveR(e) {
				let mon = e.changedTouches[0]
				if (mon.pageX <= 0) mon.pageX = 0
				if (mon.pageX >= this.lineW) {
					mon.pageX = this.lineW
				}
				let range = mon.pageX - this.offsetR.pageX

				let num = 1
				if (range > 0) {
					num = Math.ceil(mon.pageX / this.lineItemW)
				} else {
					num = Math.floor(mon.pageX / this.lineItemW)
				}
				// console.log(num * this.lineItemW);
				if(num * this.lineItemW-this.paX>=this.lineItemW){
					this.paRX = num * this.lineItemW
					this.LeftX = null
					this.indexR=num
				}
				// if(this.paRX-num * this.lineItemW<=this.lineItemW){
				// 	console.log(num * this.lineItemW);
				// }
				



				// let mon = e.changedTouches[0]
				// if (mon.pageX <= 0) mon.pageX = 0
				// if (mon.pageX >= this.lineW) {
				// 	mon.pageX = this.lineW
				// }
				// let range = mon.pageX - this.offsetR.pageX
				// let num = 0
				// if (range > 0) {
				// 	num = Math.ceil(mon.pageX / this.lineItemW)
				// } else {
				// 	num = Math.floor(mon.pageX / this.lineItemW)
				// }
				// // console.log(range, num);
				// //
				// if (this.threshold <= mon.pageX) {
				// 	this.paX = mon.pageX

				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.moneyBox {
		padding: 20rpx 0;

		.numBox {
			display: flex;

			.num {
				flex: 1;
				margin-bottom: 10rpx;
				
				&:last-child {
					text-align: right;
				}
			}

		}

		.line {
			background: #F4F4F4;
			height: 8rpx;
			width: 100%;
			position: relative;

		}

		.dian {
			width: 10rpx;
			height: 10rpx;
			background: #E2E2E2;
			position: absolute;
			z-index: 10;
		}

		.btoo {
			background: #0E59EA;
			position: absolute;
			height: 200%;
			top: 50%;
			transform: translate(0, -50%);
			display: flex;
			z-index: 11;
		}

		.bottom {
			left: 0;
		}

		.bottomR {
			right: 0;
		}

		.iocn {
			position: absolute;
			top: -190%;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			margin-left: 0rpx;
		}

		.iconRight {
			right: 0;
			
		}
	}
</style>